<template>
    <el-row class="merge">
      <el-row style="margin-left: 30px;font-size: 18px;font-weight: bold">客户合并</el-row>
      <el-row style="margin-left: 60px">从   <span style="margin-left: 56%">合并到</span></el-row>

<!--      合并到input-->
      <el-row>
        <el-col :span="8">
          <!--      从input-->
          <el-input v-model="cong" placeholder="点击选择客户" suffix-icon="el-icon-s-unfold" v-on:click.native="aa1(1),cus=true" readonly="readonly" title="点击选择客户" style="margin-left: 15%"></el-input>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-d-arrow-right" style="font-size: 38px;font-weight: bold;margin-left: 40%"></i>
        </el-col>
        <el-col :span="8">
          <el-input v-model="dao" placeholder="点击选择客户" suffix-icon="el-icon-s-unfold" v-on:click.native="aa2(2),cus=true" readonly="readonly" title="点击选择客户" style="margin-left: -20%"></el-input>
        </el-col>
      </el-row>
      <div style="border-bottom: 1px solid darkgray">
        <el-row style="margin-left: 60px;font-weight: bold">注意：</el-row>
        <div style="margin-left: 90px;font-size: 13px">
            <el-row>1.执行合并后，<span style="font-weight: bold">左侧客户基本信息被删除进入回收站，其客户视图内其它数据合并入右侧客户，右侧客户保留。</span> </el-row>
            <el-row>2.在合并前，应检查左侧客户是否有未执行完的批量任务，如有请先结束批量任务。是否有属于某项目的情况，如有则不允许被合并。</el-row>
            <el-row>3.<span style="color: red">合并操作不可恢复！</span>请执行前检查确认客户选择是否正确。</el-row>
            <el-button type="primary" @click="confirmMerge" style="margin-left: 40%;margin-top: 20px">执行合并</el-button>

        </div>
        <el-row style="margin-left: 60px;font-size: 13px">查看历史合并记录：
        <i class="el-icon-tickets"></i><router-link :to="{path:'/cuMergeRecord'}">合并日志</router-link></el-row>
      </div>

<!--      选择客户弹框-->
      <el-dialog
        title="选择客户"
        :visible.sync="cus">
          <el-input
            placeholder="请输入客户名称" @change="serchCustomer" style="width: 180px;margin-left: 420px;cursor: pointer"
            v-model="input4" clearable onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" suffix-icon="el-icon-search" size="small">
          </el-input>
        <el-row>
          <el-table ref="multipleTable" :data="allCustomer" style="width: 100%" height="250">
            <el-table-column width="55" fixed>
              <template slot-scope="scope" >
                <span v-if="choose==1">
                  <i class="el-icon-circle-plus" title="点击选择" @click="getCurrentRow1(scope.row),cus=false" style="cursor: pointer"></i>
                </span>
                <span v-else>
                  <i class="el-icon-circle-plus" title="点击选择" @click="getCurrentRow2(scope.row),cus=false" style="cursor: pointer"></i>
                </span>
              </template>
            </el-table-column>

            <el-table-column fixed prop="cusName" label="客户名称" width="150">
            </el-table-column>

            <el-table-column prop="customEmpid.empName" label="负责人">
            </el-table-column>

            <el-table-column prop="typeId.typeName" label="客户类型" width="120">
            </el-table-column>

            <el-table-column prop="customTime" label="创建日期" width="180">
              <template slot-scope="scope">
                {{ scope.row.customTime | formatDate}}
              </template>
            </el-table-column>
          </el-table>
          <!--        分页-->
          <div class="page">
            <el-pagination
              :page-sizes="sizes"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              :page-size="pageSize"
              :current-page.sync="currPage"
              @current-change="pageChange"
              @size-change="sizeChange">
            </el-pagination>
          </div>
        </el-row>
      </el-dialog>
    </el-row>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
export default {
  name: 'CustomerMerge',
  data () {
    return {
      cong: '', // 从
      congId:'',//从客户id
      dao: '', // 合并到
      daoId:'',//到客户id
      choose: '',
      cus: false,
      input4: '', // 合并客户的搜索框
      allCustomer:[],//所有客户
      multipleSelection: [],
      // 客户分页
      totalSize: 0, //     总条数
      currPage: 1, //     默认第一页
      pageSize: 0, //      页大小
      sizes: [20,30,40,50], // 客户页大小数组
      xinxiList:[],//合并详细信息
    }
  },
  created: function () {
    this.pageSize = this.sizes[0] // 默认第一个页大小
    this.init(this.currPage, this.pageSize) // 初始化客户
  },
  methods: {
    init (currPage, pageSize, input4) {
      this.$axios.get('http://localhost:8088/vue/have-type', {params: {page: currPage, size: pageSize, cusName: input4}})
        .then(v => {
          this.allCustomer = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(v => {
          alert('访问失败！' + v.data)
        })
    },
    pageChange (page) { // 客户切换页码
      this.init(page, this.pageSize, this.input4)
    },
    sizeChange (pageSize) { // 客户页大小改变
      this.init(1, pageSize, this.input4)
      this.pageSize = pageSize
    },
    serchCustomer () { // 客户模糊查询、条件查询
      this.init(1, this.pageSize, this.input4)
    },
    // 单选按钮
    getCurrentRow1 (row) {
      this.cong = row.cusName
      this.congId = row.customId
      window.console.log(row)
    },
    getCurrentRow2 (row) {
      this.daoId = row.customId
      this.dao = row.cusName
    },
    // 点击input给a赋值
    aa1 (ind1) {
      this.choose = ind1
    },
    aa2 (ind2) {
      this.choose = ind2
    },
    confirmMerge () { // 执行合并
      if(this.congId != 0 && this.daoId != 0) {
        if(this.congId != this.daoId){
          var id=JSON.stringify({congId:this.congId,daoId:this.daoId})
          var empId=JSON.parse(sessionStorage.getItem('user')).employeesId
          this.$axios.post("http://localhost:8088/vue/customer-merge",this.qs.stringify({id:id,empId:empId}))
            .then(v => {
              window.console.log(v.data)
              if(v.data != null && v.data != "") {
                this.$message.error(v.data)
              }else {
                this.$message.success('合并成功')
                this.congId=''
                this.daoId=''
                this.init(this.currPage, this.pageSize) // 初始化客户
                this.$axios.get("http://localhost:8088/vue/customer-merge-xinxi")
                .then(v=>{
                  this.xinxiList=v.data
                  this.$router.push({
                    path:'/cumergexinxi',
                    query:{
                      xinxiList:this.xinxiList
                    }
                  })
                }).catch()
              }
              this.cong='';
              this.dao='';
            })
            .catch(()=>{
              this.$message.error("合并失败")
            })
        }else{
          this.$message.error("不可合并相同客户")
        }
      }else {
        this.$message("请选择客户")
      }
    }
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
  .merge{
    width: 100%;
    background: white;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: #ccc 0px 0px 10px;
    min-height: 650px;
    overflow:hidden;
  }

  .merge .el-row{
    margin-top: 20px;
  }

  a{
    text-decoration: none;
  }

  a:active{
    color: black;
  }

  .page{
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }
</style>
